<template>
  <div class="container">
    <div v-if="categories.length === 0" class="no-data">
      <p>暂无数据</p>
    </div>
    <div v-else class="flex-container" v-for="(category, index) in categories" :key="index">
      <h1>{{ category.title }}</h1>
      <el-tag 
        v-for="(tag, tagIndex) in category.tags" 
        :key="tagIndex" 
        :type="category.clickedTag.includes(tag) ? 'danger' : 'primary'" 
        @click="handleClick(index, tag)"
      >
        {{ tag }}
      </el-tag>
    </div>
  </div>
  <div>
    <div v-if="allQuestions.length === 0" class="no-data">
      <p>暂无数据</p>
    </div>
    <div v-else v-for="question in allQuestions" :key="question.id" class="quiz-page">
      <h1>{{ question.label }} ({{ question.score }} 分)</h1>
      <div class="question">
        <p v-html="question.description"></p>
        <div class="options">
          <label v-for="option in question.op" :key="option.key">
            <input type="radio" :name="'question-' + question.id" :value="option.key" class="hidden-radio" />
            {{ option.label }}
          </label>
        </div>
        <div v-if="question.Image">
          <img class="preview-question-img" :src="question.Image" />
        </div>
      </div>
      <div class="extra-info">
        <el-button 
          type="primary" 
          @click="submitAnswer(question)" 
          :disabled="selectedQuestions.some(q => q.id === question.id)"
        >
          加入试卷
        </el-button>
      </div>
    </div>
 <!-- 分页条 -->
<el-pagination 
  v-if="allQuestions.length > 0"
  v-model:current-page="pageno" 
  v-model:page-size="pagesize" 
  :page-sizes="[10, 20, 50, 100]"
  layout="jumper, total, sizes, prev, pager, next" background 
  :total="total" 
  @size-change="handlePageSizeChange"
  @current-change="handlePageChange" 
  style="margin-top: 20px; justify-content: flex-end" />
  </div>
  <div class="preview-button-container">
    <el-button type="primary" @click="saveExam">保存试卷</el-button>
    <el-badge :value="selectedQuestions.length" :hidden="selectedQuestions.length === 0">
      <el-button type="primary" @click="openQuestionSelector">预览试卷</el-button>
    </el-badge>
    <el-button type="primary" @click="drawerVisible = true">格式</el-button>
  </div>
  
  <!-- 抽屉组件 -->
  <el-drawer
    title="试卷结构设置"
    v-model="drawerVisible"
    direction="rtl"
    size="50%"
  >
    <el-card class="card-container">
      <el-form :model="examInfo" class="form-container">
        <el-form-item label="试卷名称">
          <el-input v-model="examInfo.name"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card class="card-container">
      <h3>试卷结构设置</h3>
      <el-form :model="structureInfo">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="总题数">
              <el-input-number v-model="totalQuestionCount" :min="0" controls-position="right" disabled class="align-left01"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="总分值">
              <el-input-number v-model="totalScore" :min="0" :step="0" controls-position="right" disabled class="align-left02"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="单选题数量">
              <el-input-number v-model="structureInfo.singleChoiceCount" :min="0"  controls-position="right" disabled class="align-left"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每题分值">
              <el-input-number v-model="structureInfo.singleChoiceScore" :min="0.1" controls-position="right"  class="align-left" :disabled="structureInfo.singleChoiceCount === 0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="多选题数量">
              <el-input-number v-model="structureInfo.multipleChoiceCount" :min="0" controls-position="right" disabled class="align-left"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每题分值">
              <el-input-number v-model="structureInfo.multipleChoiceScore" :min="0.1" controls-position="right" class="align-left" :disabled="structureInfo.multipleChoiceCount === 0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="判断题数量">
              <el-input-number v-model="structureInfo.trueFalseCount" :min="0" controls-position="right" disabled class="align-left"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="每题分值">
              <el-input-number v-model="structureInfo.trueFalseScore" :min="0.1" controls-position="right" class="align-left" :disabled="structureInfo.trueFalseCount === 0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <el-button type="primary" @click="cancel">清空格式</el-button>
    <el-button type="primary" @click="drawerVisible = false">确定</el-button>
  </el-drawer>

  <!-- 试卷预览对话框 -->
  <el-dialog
    title="试卷预览"
    v-model="previewDialogVisible"
    :fullscreen="isFullscreen"
  >
    <div>
      <el-row :gutter="20">
        <el-col :span="8">
          <h2>总题数: {{ totalQuestionCount }}</h2>
        </el-col>
        <el-col :span="8">
          <h2>总分数: {{ totalScore }}</h2>
        </el-col>
      </el-row>
      <el-row :gutter="20">

      </el-row>
    </div>
    <div v-if="selectedQuestions.length === 0">
      <p>暂无数据</p>
    </div>
    <div v-else v-for="question in selectedQuestions" :key="question.id" class="preview-quiz-page">
      <h2>{{ question.label }} ({{ question.score }} 分)</h2>
      <div class="preview-question">
        <p v-html="question.description"></p>
        <div class="preview-options">
          <label v-for="option in question.op" :key="option.key">
            {{ option.label }}
          </label>
        </div>
        <div v-if="question.Image">
          <img class="preview-question-img" :src="question.Image" />
        </div>
      </div>
      <div class="remove-button">
        <el-button type="danger" @click="removeQuestionFromPreview(question)">移除</el-button>
      </div>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="previewDialogVisible = false">关闭</el-button>
        <el-button @click="toggleFullscreen">切换全屏</el-button> <!-- 添加切换全屏按钮 -->
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { reactive, ref, computed, watch, onMounted } from 'vue';
import { getselectsubject,  getdirections, getexaminationList,postexamination,getselectexamination } from '@/api/examinationService';
import { ElMessage } from 'element-plus'; // 引入 Element Plus 的消息提示组件
import { useUserInfoStore } from '@/store/user';

const userStore = useUserInfoStore();
const directions = ref([]);
const selectedProfessional = ref(null);
const isProfessionalLocked = ref(false);
const drawerVisible = ref(false);
const previewDialogVisible = ref(false);
const pageno = ref(1);
const pagesize = ref(10);
const total = ref(0);
const examInfo = reactive({
  name: '',
});
const isFullscreen = ref(false); // 添加全屏状态变量

// 切换全屏状态的方法
const toggleFullscreen = () => {
  isFullscreen.value = !isFullscreen.value;
};

const structureInfo = reactive({
  singleChoiceCount: 0,
  singleChoiceScore: 0.1,
  multipleChoiceCount: 0,
  multipleChoiceScore: 0.1,
  trueFalseCount: 0,
  trueFalseScore: 0.1,
  
});
watch(
  () => ({
    singleChoiceScore: structureInfo.singleChoiceScore,
    multipleChoiceScore: structureInfo.multipleChoiceScore,
    trueFalseScore: structureInfo.trueFalseScore
  }),
  (newScores) => {
    // 更新 allQuestions 中的题目分数
    allQuestions.value.forEach(question => {
      if (question.type === 2) { // 单选题
        question.score = newScores.singleChoiceScore;
      } else if (question.type === 1) { // 多选题
        question.score = newScores.multipleChoiceScore;
      } else if (question.type === 0) { // 判断题
        question.score = newScores.trueFalseScore;
      }
    });

    // 更新 selectedQuestions 中的题目分数
    selectedQuestions.value = selectedQuestions.value.map(selectedQuestion => {
      const updatedQuestion = allQuestions.value.find(q => q.id === selectedQuestion.id);
      return updatedQuestion ? { ...updatedQuestion } : selectedQuestion;
    });

    // 重新计算总题数和总分值
    calculateTotalQuestionCount();
    calculateTotalScore();
  },
  { deep: true }
);

// 新增的知识点列表
const knowledgePoints = ref([]);
const totalQuestionCount = ref(0);

// 计算总题数
const calculateTotalQuestionCount = () => {
  totalQuestionCount.value = structureInfo.singleChoiceCount + structureInfo.multipleChoiceCount + structureInfo.trueFalseCount;
};
// 将 totalScore 改为 ref
const totalScore = ref(0);

// 计算总分值的函数
const calculateTotalScore = () => {
  totalScore.value = (structureInfo.singleChoiceCount * structureInfo.singleChoiceScore) +
                     (structureInfo.multipleChoiceCount * structureInfo.multipleChoiceScore) +
                     (structureInfo.trueFalseCount * structureInfo.trueFalseScore);
};
// 计算已选题目的详细信息
const selectedQuestionsWithDetails = computed(() => {
  return selectedQuestions.value.map(id => allQuestions.value.find(q => q.id === id));
});

const selectedQuestions = ref([]);
const selectedQuestions01 = ref([]);


// 计算已选题目的详细信息，包括分数


const allQuestions = ref([]);

const handleClick = (categoryIndex, tag) => {
  const category = categories.value[categoryIndex];

  if (category.title === '知识点') {
    // 处理知识点的多选逻辑
    const tagIndex = category.clickedTag.indexOf(tag);
    if (tagIndex > -1) {
      category.clickedTag.splice(tagIndex, 1); // 移除标签
    } else {
      category.clickedTag.push(tag); // 添加标签
    }
  } else if (category.title === '难度' || category.title === '类型') {
    // 处理单选逻辑
    if (category.clickedTag.includes(tag)) {
      category.clickedTag = []; // 取消当前选中的标签
    } else {
      category.clickedTag = [tag]; // 设置新的选中的标签
    }
  }

  printSelectedTags();
};

const QUESTION_TYPE_MAP = {
  2: 'singleChoiceCount',
  1: 'multipleChoiceCount',
  0: 'trueFalseCount'
};

const removeQuestionFromPreview = (question) => {
  const index = selectedQuestions.value.findIndex(q => q.id === question.id);
  if (index === -1) {
    ElMessage.warning('该题目不在当前试卷中');
    return;
  }

  // 移除题目
  selectedQuestions.value.splice(index, 1);

  // 同步更新结构信息
  const questionTypeKey = QUESTION_TYPE_MAP[question.type];
  if (questionTypeKey && structureInfo[questionTypeKey] > 0) {
    structureInfo[questionTypeKey] -= 1;

    // 更新总分值
    totalScore.value -= question.score;
  }

  // 重新计算总题数
  calculateTotalQuestionCount();

  ElMessage.success('题目移除成功');
};

const printSelectedTags = () => {
  const allSelectedTags = categories.value.flatMap(category => category.clickedTag);

  // 分类处理
  const questionTypes = ['单选题', '多选题', '判断题'];
  const difficultyLevels = ['低', '中', '高'];

  const categorizedTags = {
    questionTypes: [],
    difficultyLevels: [],
    others: []
  };

  allSelectedTags.forEach(tag => {
    if (questionTypes.includes(tag)) {
      categorizedTags.questionTypes.push(tag);
    } else if (difficultyLevels.includes(tag)) {
      categorizedTags.difficultyLevels.push(tag);
    } else {
      categorizedTags.others.push(tag);
    }
  });

  // 将标签转换为对应的数值
  const questionTypesValues = categorizedTags.questionTypes.map(tag => {
    switch (tag) {
      case '单选题': return 2;
      case '多选题': return 1;
      case '判断题': return 0;
      default: return tag; // 这里理论上不会执行
    }
  });

  const difficultyLevelsValues = categorizedTags.difficultyLevels.map(tag => {
    switch (tag) {
      case '低': return 1;
      case '中': return 2;
      case '高': return 3;
      default: return tag; // 这里理论上不会执行
    }
  });

  // 对于 others，使用 xx.value 中的 label_id
  const othersValues = categorizedTags.others.map(tag => {
    const item = xx.value.find(x => x.label_name === tag);
    return item ? item.label_id : tag; // 如果找不到对应的 label_id，则返回原始标签
  });

  // 转换为字符串
 subject_type.value = questionTypesValues.join('');
 subject_lv.value = difficultyLevelsValues.join('');
 subject_label.value = othersValues.join(',');
  console.log(subject_type.value, subject_lv.value, subject_label.value);
  fetchSubjectData(subject_type.value, subject_lv.value, subject_label.value)
};
const subject_label=ref('');
const subject_lv=ref('');
const subject_type=ref('');

const submitAnswer = (question) => {

  if (!selectedQuestions.value.some(q => q.id === question.id)) {
    selectedQuestions.value.push({
      ...question,
      score: question.score // 确保分数也被传递过去
    });

    // 更新结构信息
    if (question.type === 2) { // 单选题
      structureInfo.singleChoiceCount += 1;
    } else if (question.type === 1) { // 多选题
      structureInfo.multipleChoiceCount += 1;
    } else if (question.type === 0) { // 判断题
      structureInfo.trueFalseCount += 1;
    }
    calculateTotalQuestionCount();
    calculateTotalScore();
    ElMessage.success('题目添加成功');
  } else {
    ElMessage.warning('题目已存在于试卷中');
  }
};
//查询某试卷的基础信息以及试题
const selectexamination = async (examination_id) => {
  try {
    const result = await getselectexamination(examination_id);
    console.log('API Response:', result);
    // 假设返回的数据结构为 { examination, questions }
    examInfo.name = result.data.examinationInfo.examination_name; 
    totalScore.value = result.data.examinationInfo.examination_score;
    
    console.log('examInfo:', result.data.examinationInfo.examination_score);
    totalQuestionCount.value = result.data.questions.length;
    selectedQuestions.value = result.data.questions.map(question => ({
      id: question.questiones_subject,
      label: `${question.subject_name} (${question.subject_type === 0 ? '判断题' : question.subject_type === 2 ? '单选题' : question.subject_type === 1 ? '多选题': '未知'})`,
      description: question.description || '',
      type: question.subject_type,
      Image: question.image || '',
      op: [
        { key: 1, label: question.option_a ? 'A.' + question.option_a : '' },
        { key: 2, label: question.option_b ? 'B.' + question.option_b : '' },
        { key: 3, label: question.option_c ? 'C.' + question.option_c : '' },
        { key: 4, label: question.option_d ? 'D.' + question.option_d : '' },
        { key: 5, label: question.option_e ? 'E.' + question.option_e : '' },
        { key: 6, label: question.option_f ? 'F.' + question.option_f : '' },
      ].filter(option => option.label && option.label !== 'undefined'),
      score: question.questiones_score || 0,
    }));

    // 更新结构信息
    structureInfo.singleChoiceCount = selectedQuestions.value.filter(q => q.type === 2).length;
    structureInfo.multipleChoiceCount = selectedQuestions.value.filter(q => q.type === 1).length;
    structureInfo.trueFalseCount = selectedQuestions.value.filter(q => q.type === 0).length;

    // 根据题目的类型更新每题分值
    const singleChoiceScores = selectedQuestions.value.filter(q => q.type === 2).map(q => q.score);
    const multipleChoiceScores = selectedQuestions.value.filter(q => q.type === 1).map(q => q.score);
    const trueFalseScores = selectedQuestions.value.filter(q => q.type === 0).map(q => q.score);

    if (singleChoiceScores.length > 0) {
      structureInfo.singleChoiceScore = singleChoiceScores[0]; // 假设所有单选题的分值相同
    }
    if (multipleChoiceScores.length > 0) {
      structureInfo.multipleChoiceScore = multipleChoiceScores[0]; // 假设所有多选题的分值相同
    }
    if (trueFalseScores.length > 0) {
      structureInfo.trueFalseScore = trueFalseScores[0]; // 假设所有判断题的分值相同
    }

    console.log(selectedQuestions.value);
  } catch (error) {
    console.error('Error fetching subject data:', error);
  }
};
const id=ref(0)
onMounted(() => {
  examinationList(1);
  
  // fetchDirectionData();
  // let xx=45;
  // id.value=45
  if (id.value) {
    selectexamination(id.value); 
    fetchSubjectData(1);// 如果有试卷ID，则加载已有试卷信息
  } else {

    fetchSubjectData(1);
  }
});
// 添加分页相关的事件处理函数
const handlePageChange = (newPage) => {
  pageno.value = newPage;
  let subjectId=1
  console.log(subjectId, pageno.value, pagesize.value);
  fetchSubjectData(subjectId, pageno.value, pagesize.value);
};

const handlePageSizeChange = (newPageSize) => {
  pagesize.value = newPageSize;
  pageno.value = 1; // 重置页码
  let subjectId=1
  fetchSubjectData(subjectId, pageno.value, pagesize.value);
};
const xx = ref([]);
const examinationList = async (major_id) => {
  try {
    const result = await getexaminationList(major_id);
    console.log(2);
    console.log(result);
     xx.value = result.data;
    // 更新 categories 中的知识点标签
    categories.value[0].tags = result.data.map(item => item.label_name);
    categories.value[0].tagMap = result.data.reduce((acc, item) => {
      acc[item.label_name] = item.label_id;
      return acc;
    }, {});

    console.log(categories.value);
  } catch (error) {
    console.error('Error fetching examination list:', error);
  }
};

// 初始化标签映射
const categories = ref([
  { title: '知识点', tags: [], clickedTag: [], tagMap: {} },
  { title: '难度', tags: ['低', '中', '高'], clickedTag: [], tagMap: { '低': 1, '中': 2, '高': 3 } },
  { title: '类型', tags: ['单选题', '多选题', '判断题'], clickedTag: [], tagMap: { '单选题': 2, '多选题': 1, '判断题': 0 } },
]);
const tt=ref({});
const fetchSubjectData = async (subjectId) => {
  tt.value.subject_major = 1;
  tt.value.pagesize=pagesize.value;
  tt.value.pageno=pageno.value;
  if(subject_type.value!=''&&subject_type.value!=undefined){
    tt.value.subject_type=subject_type.value;
  }
  if(subject_lv.value!=''&&subject_lv.value!=undefined){
    tt.value.subject_lv=subject_lv.value;
  }
  if(subject_label.value!=''&&subject_label.value!=undefined){
    tt.value.subject_label=subject_label.value;
  }
  console.log("tt");
  console.log(tt.value);

  try {
    let result;
    console.log(subjectId);
  
      result = await getselectsubject(tt);
    
   
    console.log(result.data);
    allQuestions.value = result.data.data.map(question => {
      let typeLabel = '';
      let score = 0; // 初始化分数为0
      switch (question.subject_type) {
        case 2:
          typeLabel = '（单选题）';
          score = structureInfo.singleChoiceScore; // 使用单选题的分数
          break;
        case 1:
          typeLabel = '（多选题）';
          score = structureInfo.multipleChoiceScore; // 使用多选题的分数
          break;
        case 0:
          typeLabel = '（判断题）';
          score = structureInfo.trueFalseScore; // 使用判断题的分数
          break;
        default:
          typeLabel = '';
      }
      return {
        id: question.subject_id,
        label: `${question.subject_name}${typeLabel}`,
        description: question.subject_description, // 确保 description 字段存在
        type: question.subject_type,
        Image: question.subject_image,
        op: [
          { key: 1, label: 'A.' + question.option_a },
          { key: 2, label: 'B.' + question.option_b },
          { key: 3, label: 'C.' + question.option_c },
          { key: 4, label: 'D.' + question.option_d },
          { key: 5, label: 'E.' + question.option_e },
          { key: 6, label: 'F.' + question.option_f },
        ].filter(option => option.label !== 'A.undefined' && option.label !== 'B.undefined' && option.label !== 'C.undefined' && option.label !== 'D.undefined' && option.label !== 'E.undefined' && option.label !== 'F.undefined'
          && option.label !== 'A.' && option.label !== 'B.' && option.label !== 'C.' && option.label !== 'D.' && option.label !== 'E.' && option.label !== 'F.'
        ),
        score: score // 添加分数字段
      };
    });

    // 根据 type 排序：0（判断题）、1（单选题）、2（多选题）
    allQuestions.value.sort((a, b) => a.type - b.type);
    total.value = result.data.count;
    tt.value={}
    console.log(allQuestions.value);
  } catch (error) {
    console.log("错误");
    console.error('Failed to fetch subject data:', error);
  }
};

const fetchDirectionData = async () => {
  try {
    const result = await getdirections();
    console.log(result.data);
    directions.value = result.data;

    // 设置默认选中的专业为第一个方向
    if (result.data.length > 0) {
      selectedProfessional.value = result.data[0].direction_id;
    }
  } catch (error) {
    console.error('Failed to fetch direction data:', error);
  }
};

const cancel = () => {
  // 这里应该包含取消创建试卷的逻辑，如重置表单
  examInfo.name = '';

  structureInfo.singleChoiceCount = 0;
  structureInfo.singleChoiceScore = 0;
  structureInfo.multipleChoiceCount = 0;
  structureInfo.multipleChoiceScore = 0;
  structureInfo.trueFalseCount = 0;
  structureInfo.trueFalseScore = 0;
  selectedQuestions.value = [];
};

const isStructureValid = computed(() => {
  return (structureInfo.singleChoiceCount * structureInfo.singleChoiceScore) +
         (structureInfo.multipleChoiceCount * structureInfo.multipleChoiceScore) +
         (structureInfo.trueFalseCount * structureInfo.trueFalseScore) > 0;
});

const saveExam = async () => {
  // 验证试卷名称是否为空
  if (!examInfo.name.trim()) {
    ElMessage.error('请输入试卷名称');
    return;
  }

  // 验证总题数和总分值是否大于零
  if (totalQuestionCount.value <= 0 || totalScore.value <= 0) {
    ElMessage.error('请确保总题数和总分值大于零');
    return;
  }

  // 验证试卷结构是否有效
  if (!isStructureValid.value) {
    ElMessage.error('已选题目不符合试卷结构设置或未设置分值');
    return;
  }
  
  // 创建一个数组来存储题目ID和分数
  const questionsData = selectedQuestions.value.map(question => ({
    questionesSubject: question.id,
    questionesScore: question.score
  }));

  // 封装数据到一个对象中
  const examData = {
    examinationId: id.value,
    examinationTeacherId: userStore.userInfo.userId,
    examinationName: examInfo.name,
    examinationScore: totalScore.value,
    examinationType: 1,
    questions: questionsData // 添加题目数组
  };

  console.log('准备保存的试卷数据:', examData);

  try {
    
    const result = await postexamination(examData);
    if (result.code === 200) {
      console.log(examData);
      cancel(); // 清空表单
      ElMessage.success('保存试卷成功');
    } else {
      ElMessage.error('保存试卷失败');
    }
  } catch (error) {
    console.error('保存试卷时发生错误:', error);
    ElMessage.error('保存试卷失败');
  }
};
const openQuestionSelector = () => {
  // 如果有 id，则直接打开预览对话框
  if (id.value) {
    previewDialogVisible.value = true;
    calculateTotalQuestionCount();
    calculateTotalScore();
    return;
  }

  // 没有 id 的情况下进行原有验证
  if (!examInfo.name || totalQuestionCount.value <= 0 || totalScore.value <= 0) {
    ElMessage.error('请填写试卷名称并确保总题数和总分值大于零');
    return;
  }

  // 打印预览试卷中的所有题目及其相关信息
  console.log('预览试卷中的题目:', selectedQuestions.value);

  previewDialogVisible.value = true;
};
</script>

 <style lang='scss' scoped>
.el-select {
  width: 200px; // 根据需要调整宽度
}

.container {
  margin-left: 20px;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 16px; // 调整间距
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px; // 调整间距
}

h1 {
  margin-right: 16px; // 调整标题与标签之间的间距
}

.quiz-page {
  width: 97%;
  margin-top: 20px;
  margin-left: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  position: relative; // 添加相对定位
}

.question {
  margin-bottom: 20px;
}

.options {
  margin-top: 10px;
  display: flex;
  flex-direction: column; /* 改为竖排 */
}

.options label {
  margin-bottom: 10px; /* 增加选项间的间距 */
  cursor: pointer;
}

.extra-info {
  margin-top: 20px;
  font-size: 0.9em;
  color: #666;
  text-align: right; // 文字靠右对齐
  position: absolute; // 绝对定位
  bottom: 20px; // 距离底部20px
  right: 20px; // 距离右边20px
}

.hidden-radio {
  display: none; /* 隐藏默认的 radio 按钮 */
}

.red-rounded-button {
  background-color: red;
  color: white;
  border: none;
  border-radius: 20px; // 圆角按钮
  padding: 10px 20px;
  cursor: pointer;
}
.preview-question-img {
  margin-right: 300px;
  border: 1px solid black;
  width: 400px;
  height: 150px
}

  .page-wrapper {
  position: relative;
  min-height: 100vh; // 确保有足够的高度来容纳子元素
}
.preview-button-container {

  display: flex;
  gap: 20px;

 
}
.card-container-dashboard {
    margin-top: -18px;
    width: 100%;
    padding: 20px;
  }
  
  .card-container {
    margin-bottom: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  .align-left01{
  margin-left: 27px;
}
.align-left02{
  margin-left: 15px;
}
// 对话框
.preview-quiz-page {
  width: 100%;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.preview-question {
  margin-bottom: 20px;
}

.preview-options {
  margin-top: 10px;
}

.preview-options label {
  display: block;
  margin-bottom: 10px;
}

.preview-question-img {
  margin-top: 10px;
  max-width: 100%;
  height: auto;
}
.right-section h1 {
  margin-left: 20px; /* 增加左边距 */
}
//暂无数据样式
.no-data {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* 使容器高度占满整个视口 */
  text-align: center;
}
</style>